<template>
  <div class="packages">
    <el-form>
      <el-form-item label="平台类型">
        <el-select v-model="match.platformTypeId" placeholder="请选择" @change='(e) => getList(e)'>
          <el-option value="" label="全部"></el-option>
          <el-option v-for="item in Arr.platformTypeArr" :key="item.id" :label="item.platformType" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="container">
      <div class="aside">
        <div class="table-title">
          <span class="left-title">报告预警：</span>
          <span class="right-title">说明：三天内，剩余时间小于等于2小时的条码</span>
        </div>
        <el-table :data="tableData2" border stripe style="width: 100%" height="230" :header-cell-style="{
          background: '#ebebeb'
        }" highlight-current-row  @selection-change="handleSelectionChange">
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column width="120" show-overflow-tooltip align="center" prop="barcodeCode" label="条码号"></el-table-column>
          <el-table-column width="200" show-overflow-tooltip align="center" prop="experimentNumber" label="实验编号"></el-table-column>
          <el-table-column width="380" align="center" prop="projectTypeName" label="项目类型"></el-table-column>
          <el-table-column width="200" show-overflow-tooltip align="center" prop="professionalGroupName" label="专业组"></el-table-column>
        </el-table>
      </div>
      <div class="main">
        <div class="table-title">
          <span class="left-title">报告超时：</span>
          <span class="right-title">说明：三天内，超时的条码</span>
        </div>
        <el-table :data="tableData3" border stripe style="width: 100%" height="230" :header-cell-style="{
          background: '#ebebeb'
        }" highlight-current-row  @selection-change="handleSelectionChange">
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column width="120" show-overflow-tooltip align="center" prop="barcodeCode" label="条码号"></el-table-column>
          <el-table-column width="200" show-overflow-tooltip align="center" prop="experimentNumber" label="实验编号"></el-table-column>
          <el-table-column width="380" align="center" prop="projectTypeName" label="项目类型"></el-table-column>
          <el-table-column width="200" show-overflow-tooltip align="center" prop="professionalGroupName" label="专业组"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="container">
      <div class="aside">
        <div class="table-title">
          <span class="left-title">报告迟发：</span>
          <span class="right-title">说明：三天内，迟发报告</span>
        </div>
        <el-table :data="tableData1" border stripe style="width: 100%" height="230" :header-cell-style="{
          background: '#ebebeb'
        }" highlight-current-row  @selection-change="handleSelectionChange">
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column width="120" show-overflow-tooltip align="center" prop="barcodeCode" label="条码号"></el-table-column>
          <el-table-column width="200" show-overflow-tooltip align="center" prop="experimentNumber" label="实验编号"></el-table-column>
          <el-table-column width="380" align="center" prop="projectTypeName" label="项目类型"></el-table-column>
          <el-table-column width="200" show-overflow-tooltip align="center" prop="professionalGroupName" label="专业组"></el-table-column>
        </el-table>
      </div>
      <div class="main"></div>
    </div>
  </div>
</template>

<script>
import { Arr } from '@/utils/data.js'
import { warnLateList, warnMinHourList, warnOutList } from '@/api/index.js'

export default {
  name: "Index",
  data() {
    return {
      tableData1: [],
      tableData2: [],
      tableData3: [],
      Arr: {},
      params: {
        pageSize: 20,
        pageNum: 1,
        // platformTypeId: "",
      },
      warnTableData: [],
      multipleSelection: [],
      match: {
        pageSize: 20,
        pageNum: 1,
        platformTypeId: '',
        platformType: '全部'
      }
    };
  },
  methods: {
    getList(e) {
      if (String(e) !== 'undefined') {
        // console.log(e, '0000')
        const a = this._.clone(this.Arr);
        const match = a?.platformTypeArr?.filter((f) => Number(f.id) === Number(e));
        localStorage.setItem('match', JSON.stringify(match))
      };
      this.match.pageNum=1
      this.match.pageSize=20
      this.getList1()
      this.getList2()
      this.getList3()
    },
    // 迟发
    getList1() {

      warnLateList(this.match).then(res => {
        this.tableData1 = res.rows
      })
    },
    // 剩余2小时
    getList2() {
      warnMinHourList(this.match).then(res => {
        this.tableData2 = res.rows
      })
    },
    // 超时
    getList3() {
      warnOutList(this.match).then(res => {
        this.tableData3 = res.rows
      })
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    const match = JSON.parse(localStorage.getItem('match'));
    match.forEach(e => {
      const item = {
        platformTypeId: e.id,
        platformType: e.platformType
      }
      this.match = item;
    });
    // console.log(this.match);

  },
  mounted() {
    this.getList()
    this.Arr = Arr
  },

};
</script>

<style lang="scss" scoped>
.packages {
  padding: 20px;
  // background-color: rgb(240, 242, 245);
  position: relative;

  .container {
    // border: 1px solid rgb(220, 223, 230);
    border-radius: 4px;
    display: flex;
  }

  .aside {
    width: 50%;
    // border-right: 1px solid rgb(220, 223, 230);
    padding-right: 7px;
    box-sizing: border-box;
    overflow: auto;
  }

  .main {
    width: 50%;
    padding-left: 7px;
    flex: 1;
  }

  .table-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .left-title {
      font-weight: 800
    }

    .right-title {
      color: orange;
      font-size: 14px;
    }
  }

  ::v-deep .el-table__body tr.current-row>td {
    background: #a8d6fe !important;
  }

  ::v-deep .el-table__body tr:hover>td {
    background: #a8d6fe !important;
  }

}
</style>
